<template>
	<div>
		<van-nav-bar
			title="订单详情"
			left-arrow
			@click-left="this.$router.go(-1)" />
		<section class="aui-flexView">
			<!-- 订单详细 -->
			<section class="aui-scrollView">
				<!-- 订单状态 -->
				<div class="aui-pay-change">
					<div class="aui-flex">
						<div class="aui-flex-box">
							<h3>{{ indexInfo[1] }}</h3>
						</div>
					</div>
				</div>

				<!-- 收货地址 -->
				<div class="aui-flex">
					<div class="aui-flex-add">
						<img
							:src="indexInfo[0]"
							style="height: 100%; object-fit: cover" />
					</div>
					<div class="aui-flex-box">
						<h3>
							{{ address.consignee }} <em>{{ address.mobile }}</em>
						</h3>
						<p>{{ address.region }}</p>
					</div>
				</div>

				<van-steps
					direction="vertical"
					:active="0"
					v-if="isShow">
					<van-step
						v-for="it in express"
						:key="it.id">
						<h3>{{ it.status }}</h3>
						<p>{{ time }}</p>
					</van-step>
				</van-steps>

				<van-steps
					direction="vertical"
					:active="0"
					v-else>
					<van-step>
						<h3>暂无物流信息</h3>
					</van-step>
				</van-steps>
			</section>

			<footer class="aui-footer aui-footer-fixed">
				<div class="aui-footer-text-info">
					<a
						href="javascript:;"
						class="aui-payment"
						>申请退货</a
					>
				</div>
				<div class="aui-footer-text-info">
					<a
						href="javascript:;"
						class="aui-payment"
						>确认收货</a
					>
				</div>
				<div class="aui-footer-text-info">
					<a
						href="javascript:;"
						class="aui-payment"
						>评价</a
					>
				</div>
			</footer>
		</section>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	export default {
		created() {
			this.info(this.$route.query.id);
		},
		data() {
			return {
				express: {},
				address: {},
				indexInfo: "",
				isShow: true,
				isLoading: false,

			};
		},
		methods: {
			async info(id) {
				this.isLoading = true;
				let res = await this.$api.OrderExpress({
					id,
					busid: this.$cookies.get("User").id,
				});
				
				if (res.code == 1) {
					this.address = res.data[0];
					this.indexInfo = res.data[1];
					this.express = res.data[2];
					if (!this.express) {
						this.isShow = false;
					}
				} else {
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
			},
		},
	};
</script>

<style scoped>
	@import url("/assets/css/orderinfo.css");
</style>
